@theme: '#f1f1f1'!important;

.flex(
    @space: space-between,
    @align: center,
    @direction: row,
    @wrap: wrap
  ) {
    display: flex;
    justify-content: @space;
    align-items: @align;
    flex-wrap: @wrap;
    flex-direction: @direction;
}
.ellipsis(@line:2){
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-all;
	display: -webkit-box;
	line-clamp: @line;
	-webkit-line-clamp: @line;
	-webkit-box-orient: vertical;
}
.loop(@counter) when (@counter <= 100) {
    .m@{counter} { margin: unit(@counter, px); }
    .p@{counter} { padding: unit(@counter, px); }
    .mt@{counter}{ margin-top: unit(@counter, px); }
    .mb@{counter}{ margin-bottom: unit(@counter, px); }
    .ml@{counter}{ margin-left: unit(@counter, px); }
    .mr@{counter}{ margin-right: unit(@counter, px); }
    .pt@{counter}{ padding-top: unit(@counter, px); }
    .pb@{counter}{ padding-bottom: unit(@counter, px); }
    .pl@{counter}{ padding-left: unit(@counter, px); }
    .pr@{counter}{ padding-right: unit(@counter, px); }
    .fl@{counter}{ flex: 0 0 percentage(@counter/100); }
    .fw@{counter}{ width: percentage(@counter/100); }
    .fh@{counter}{ height: percentage(@counter/100); }
    .w@{counter} { width: unit(@counter, px); }
    .h@{counter} { height: unit(@counter, px); }
    .lh@{counter}{ line-height: unit(@counter, px); }
    .loop(@counter + 1);
  }
.loop(100);
